<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.61">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/icon.png"><title>vue-router3 | FYJ</title><meta name="description" content="Just playing around">
    <link rel="modulepreload" href="/assets/app-5e55c3a9.js"><link rel="modulepreload" href="/assets/framework-9675d465.js"><link rel="modulepreload" href="/assets/vue-router3.html-09f47896.js"><link rel="modulepreload" href="/assets/vue-router3.html-fa748c7b.js"><link rel="prefetch" href="/assets/index.html-6d5e9dd3.js" as="script"><link rel="prefetch" href="/assets/index.html-3d8b60b2.js" as="script"><link rel="prefetch" href="/assets/index.html-a7cfb774.js" as="script"><link rel="prefetch" href="/assets/index.html-1a66ce3d.js" as="script"><link rel="prefetch" href="/assets/index.html-a2322c32.js" as="script"><link rel="prefetch" href="/assets/index.html-2b8e88d2.js" as="script"><link rel="prefetch" href="/assets/index.html-36817084.js" as="script"><link rel="prefetch" href="/assets/index.html-c05495db.js" as="script"><link rel="prefetch" href="/assets/index.html-3cf0f594.js" as="script"><link rel="prefetch" href="/assets/index.html-33a8693c.js" as="script"><link rel="prefetch" href="/assets/index.html-80880afd.js" as="script"><link rel="prefetch" href="/assets/index.html-df5b0273.js" as="script"><link rel="prefetch" href="/assets/index.html-d608509e.js" as="script"><link rel="prefetch" href="/assets/index.html-ac9bff28.js" as="script"><link rel="prefetch" href="/assets/index.html-d251d55d.js" as="script"><link rel="prefetch" href="/assets/index.html-d299a2c9.js" as="script"><link rel="prefetch" href="/assets/index.html-c8596e07.js" as="script"><link rel="prefetch" href="/assets/index.html-ce42ac51.js" as="script"><link rel="prefetch" href="/assets/index.html-e1e2c2da.js" as="script"><link rel="prefetch" href="/assets/index.html-49c6b4a8.js" as="script"><link rel="prefetch" href="/assets/index.html-3880c1f3.js" as="script"><link rel="prefetch" href="/assets/index.html-b5b12757.js" as="script"><link rel="prefetch" href="/assets/index.html-6cf06f14.js" as="script"><link rel="prefetch" href="/assets/index.html-1a88d37b.js" as="script"><link rel="prefetch" href="/assets/index.html-c8e98ed0.js" as="script"><link rel="prefetch" href="/assets/index.html-d7cf9c00.js" as="script"><link rel="prefetch" href="/assets/git.html-0da1c675.js" as="script"><link rel="prefetch" href="/assets/html5meitiyuansu.html-4654ddc1.js" as="script"><link rel="prefetch" href="/assets/duoliebuju.html-54f235b4.js" as="script"><link rel="prefetch" href="/assets/DOM__BOM.html-b97d346f.js" as="script"><link rel="prefetch" href="/assets/jsbiji.html-a3fbc3f8.js" as="script"><link rel="prefetch" href="/assets/jsbiji2.html-6c330c31.js" as="script"><link rel="prefetch" href="/assets/RESTheAJAX.html-17e205d8.js" as="script"><link rel="prefetch" href="/assets/shuxingmiaoshufu.html-08b53360.js" as="script"><link rel="prefetch" href="/assets/liulanqixuanranyuanli.html-3208ecf3.js" as="script"><link rel="prefetch" href="/assets/zhonghuievent-loop.html-7baa2b76.js" as="script"><link rel="prefetch" href="/assets/mongodb.html-ad7d95ea.js" as="script"><link rel="prefetch" href="/assets/mongoose.html-31658686.js" as="script"><link rel="prefetch" href="/assets/express.html-042999ef.js" as="script"><link rel="prefetch" href="/assets/httpxieyi.html-abaf3902.js" as="script"><link rel="prefetch" href="/assets/httpmokuai.html-9408a820.js" as="script"><link rel="prefetch" href="/assets/nodejs.html-8df1574a.js" as="script"><link rel="prefetch" href="/assets/nodejshexinmokuai.html-72c9480b.js" as="script"><link rel="prefetch" href="/assets/promise.html-85e3fffc.js" as="script"><link rel="prefetch" href="/assets/webpackhevite.html-a09bf01e.js" as="script"><link rel="prefetch" href="/assets/huihuakongzhi.html-86d8c25d.js" as="script"><link rel="prefetch" href="/assets/baoguanliqi.html-86b29b9f.js" as="script"><link rel="prefetch" href="/assets/mokuaihua.html-67d4835d.js" as="script"><link rel="prefetch" href="/assets/fangdaolian.html-932412c5.js" as="script"><link rel="prefetch" href="/assets/typescript.html-0bd71496.js" as="script"><link rel="prefetch" href="/assets/vue2(2).html-10c04317.js" as="script"><link rel="prefetch" href="/assets/vue2.html-82b6d2df.js" as="script"><link rel="prefetch" href="/assets/vue2zujiantongxin.html-56d49820.js" as="script"><link rel="prefetch" href="/assets/vueRouter3lanjiazaishiyongdewenti.html-3ffca1f7.js" as="script"><link rel="prefetch" href="/assets/Vuex3.html-e24f4da6.js" as="script"><link rel="prefetch" href="/assets/api.html-b73a9946.js" as="script"><link rel="prefetch" href="/assets/home.html-746a4c0d.js" as="script"><link rel="prefetch" href="/assets/plugin.html-6a7b36ed.js" as="script"><link rel="prefetch" href="/assets/theme.html-6037defd.js" as="script"><link rel="prefetch" href="/assets/121501.html-8973c891.js" as="script"><link rel="prefetch" href="/assets/404.html-60b35caa.js" as="script"><link rel="prefetch" href="/assets/index.html-101169bd.js" as="script"><link rel="prefetch" href="/assets/index.html-c05f203a.js" as="script"><link rel="prefetch" href="/assets/index.html-0c6bc7be.js" as="script"><link rel="prefetch" href="/assets/index.html-0fe42912.js" as="script"><link rel="prefetch" href="/assets/index.html-35698f58.js" as="script"><link rel="prefetch" href="/assets/index.html-a9998c9a.js" as="script"><link rel="prefetch" href="/assets/index.html-e03acce1.js" as="script"><link rel="prefetch" href="/assets/index.html-936bfd18.js" as="script"><link rel="prefetch" href="/assets/index.html-3b167d99.js" as="script"><link rel="prefetch" href="/assets/index.html-6a7e33f2.js" as="script"><link rel="prefetch" href="/assets/index.html-00dc6c81.js" as="script"><link rel="prefetch" href="/assets/index.html-c386c5b9.js" as="script"><link rel="prefetch" href="/assets/index.html-62cab89d.js" as="script"><link rel="prefetch" href="/assets/index.html-c6f54c68.js" as="script"><link rel="prefetch" href="/assets/index.html-5fc54677.js" as="script"><link rel="prefetch" href="/assets/index.html-96867bd4.js" as="script"><link rel="prefetch" href="/assets/index.html-452a2070.js" as="script"><link rel="prefetch" href="/assets/index.html-500c2666.js" as="script"><link rel="prefetch" href="/assets/index.html-d797d831.js" as="script"><link rel="prefetch" href="/assets/index.html-84073cb9.js" as="script"><link rel="prefetch" href="/assets/index.html-8dfee4a9.js" as="script"><link rel="prefetch" href="/assets/index.html-a675820e.js" as="script"><link rel="prefetch" href="/assets/index.html-948f048e.js" as="script"><link rel="prefetch" href="/assets/index.html-522daa8a.js" as="script"><link rel="prefetch" href="/assets/index.html-4d67ded2.js" as="script"><link rel="prefetch" href="/assets/index.html-8caf183d.js" as="script"><link rel="prefetch" href="/assets/git.html-9cef5060.js" as="script"><link rel="prefetch" href="/assets/html5meitiyuansu.html-cd096af4.js" as="script"><link rel="prefetch" href="/assets/duoliebuju.html-4e591000.js" as="script"><link rel="prefetch" href="/assets/DOM__BOM.html-518d085e.js" as="script"><link rel="prefetch" href="/assets/jsbiji.html-f1c6b5c4.js" as="script"><link rel="prefetch" href="/assets/jsbiji2.html-0ce3d86b.js" as="script"><link rel="prefetch" href="/assets/RESTheAJAX.html-174a11fd.js" as="script"><link rel="prefetch" href="/assets/shuxingmiaoshufu.html-12f7f1aa.js" as="script"><link rel="prefetch" href="/assets/liulanqixuanranyuanli.html-e15be5a7.js" as="script"><link rel="prefetch" href="/assets/zhonghuievent-loop.html-993374db.js" as="script"><link rel="prefetch" href="/assets/mongodb.html-06aa4d45.js" as="script"><link rel="prefetch" href="/assets/mongoose.html-f6a2c1e1.js" as="script"><link rel="prefetch" href="/assets/express.html-c34de6a8.js" as="script"><link rel="prefetch" href="/assets/httpxieyi.html-393ba2a3.js" as="script"><link rel="prefetch" href="/assets/httpmokuai.html-84b55eda.js" as="script"><link rel="prefetch" href="/assets/nodejs.html-2ee518f3.js" as="script"><link rel="prefetch" href="/assets/nodejshexinmokuai.html-fabb53b0.js" as="script"><link rel="prefetch" href="/assets/promise.html-34216aec.js" as="script"><link rel="prefetch" href="/assets/webpackhevite.html-aac8da2d.js" as="script"><link rel="prefetch" href="/assets/huihuakongzhi.html-1540a73e.js" as="script"><link rel="prefetch" href="/assets/baoguanliqi.html-d4dece61.js" as="script"><link rel="prefetch" href="/assets/mokuaihua.html-2cfeca4a.js" as="script"><link rel="prefetch" href="/assets/fangdaolian.html-4c95566c.js" as="script"><link rel="prefetch" href="/assets/typescript.html-3e2bf303.js" as="script"><link rel="prefetch" href="/assets/vue2(2).html-b4107b02.js" as="script"><link rel="prefetch" href="/assets/vue2.html-dfda70b7.js" as="script"><link rel="prefetch" href="/assets/vue2zujiantongxin.html-4cf781c8.js" as="script"><link rel="prefetch" href="/assets/vueRouter3lanjiazaishiyongdewenti.html-a5f191aa.js" as="script"><link rel="prefetch" href="/assets/Vuex3.html-68ef32c1.js" as="script"><link rel="prefetch" href="/assets/api.html-710c8c92.js" as="script"><link rel="prefetch" href="/assets/home.html-b45de374.js" as="script"><link rel="prefetch" href="/assets/plugin.html-2075a048.js" as="script"><link rel="prefetch" href="/assets/theme.html-5b5f0e80.js" as="script"><link rel="prefetch" href="/assets/121501.html-865346dc.js" as="script"><link rel="prefetch" href="/assets/404.html-eab7b035.js" as="script"><link rel="prefetch" href="/assets/reco-valine-a0c1af1f.js" as="script">
    <link rel="preload" href="/assets/style-887583e0.css" as="style"><link rel="stylesheet" href="/assets/style-887583e0.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper series--no show-catalog"><div><header class="navbar-container"><!--[--><div class="site-brand nav-item"><img class="logo" src="/logo.png" alt="FYJ"><a href="/" class="site-name can-hide">FYJ</a></div><div class="nav-item navbar-links-wrapper" style=""><div><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div><nav class="navbar-links"><!--[--><div class="navbar-links__item"><a href="/" class="link router-link-active" aria-label="Home"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Home<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/categories/html-note/1/" class="link" aria-label="分类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->分类<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/tags/html5/1/" class="link" aria-label="标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签<!--]--></span></span><!--[--><!--]--></a></div><!--]--></nav><span class="xicon-container btn-toggle-dark-mode btn--dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M15 2h2v3h-2z" fill="currentColor"></path><path d="M27 15h3v2h-3z" fill="currentColor"></path><path d="M15 27h2v3h-2z" fill="currentColor"></path><path d="M2 15h3v2H2z" fill="currentColor"></path><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor"></path><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor"></path><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor"></path><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor"></path><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor"></path></svg></span><span class="xicon-container btn-toggle-menus"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><circle cx="16" cy="8" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="24" r="2" fill="currentColor"></circle></svg></span></div><!--]--></header><div class="mobile-menus-container"><nav class="navbar-links mobile"><!--[--><div class="navbar-links__item"><a href="/" class="link router-link-active" aria-label="Home"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Home<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/categories/html-note/1/" class="link" aria-label="分类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->分类<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/tags/html5/1/" class="link" aria-label="标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签<!--]--></span></span><!--[--><!--]--></a></div><!--]--></nav><div class="appearance"><span>Appearance</span><span class="xicon-container btn-toggle-dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M15 2h2v3h-2z" fill="currentColor"></path><path d="M27 15h3v2h-3z" fill="currentColor"></path><path d="M15 27h2v3h-2z" fill="currentColor"></path><path d="M2 15h3v2H2z" fill="currentColor"></path><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor"></path><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor"></path><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor"></path><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor"></path><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor"></path></svg></span></div></div><div class="series-mask"></div><aside class="series-container"><div class="site-brand"><img class="logo" src="/logo.png" alt="FYJ"><a href="/" class="site-name can-hide">FYJ</a></div><!--[--><!--]--></aside><!--[--><main class="page-container"><h1 class="page-title">vue-router3</h1><div class="page-info"><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M16 4a5 5 0 1 1-5 5a5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7a7 7 0 0 0-7-7z" fill="currentColor"></path><path d="M26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->fyj<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2023/05/01<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M11.17 6l3.42 3.41l.58.59H28v16H4V6h7.17m0-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H16l-3.41-3.41A2 2 0 0 0 11.17 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue2-note<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M10 14a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4zm0-6a2 2 0 1 0 1.998 2.004A2.002 2.002 0 0 0 10 8z" fill="currentColor"></path><path d="M16.644 29.415L2.586 15.354A2 2 0 0 1 2 13.941V4a2 2 0 0 1 2-2h9.941a2 2 0 0 1 1.414.586l14.06 14.058a2 2 0 0 1 0 2.828l-9.943 9.943a2 2 0 0 1-2.829 0zM4 4v9.942L18.058 28L28 18.058L13.942 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue2<!--]--></span></span><!----></div><div class="theme-reco-default-content"><div><h2 id="路由" tabindex="-1"><a class="header-anchor" href="#路由" aria-hidden="true">#</a> 路由</h2><ol><li>理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。</li><li>前端路由：key是路径，value是组件。</li></ol><h3 id="_1-基本使用" tabindex="-1"><a class="header-anchor" href="#_1-基本使用" aria-hidden="true">#</a> 1.基本使用</h3><ol><li><p>安装vue-router，命令：<code>npm i vue-router@3</code></p></li><li><p>应用插件：<code>Vue.use(VueRouter)</code></p></li><li><p>编写router配置项:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//引入VueRouter</span>
<span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">&#39;vue-router&#39;</span>
<span class="token comment">//引入Luyou 组件</span>
<span class="token keyword">import</span> About <span class="token keyword">from</span> <span class="token string">&#39;../components/About&#39;</span>
<span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">&#39;../components/Home&#39;</span>

<span class="token comment">//创建router实例对象，去管理一组一组的路由规则</span>
<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	<span class="token literal-property property">routes</span><span class="token operator">:</span><span class="token punctuation">[</span>
		<span class="token punctuation">{</span>
			<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;/about&#39;</span><span class="token punctuation">,</span>
			<span class="token literal-property property">component</span><span class="token operator">:</span>About
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token punctuation">{</span>
			<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;/home&#39;</span><span class="token punctuation">,</span>
			<span class="token literal-property property">component</span><span class="token operator">:</span>Home
		<span class="token punctuation">}</span>
	<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">//暴露router</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> router
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>实现切换（active-class可配置高亮样式）</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>router<span class="token operator">-</span>link active<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;active&quot;</span> to<span class="token operator">=</span><span class="token string">&quot;/about&quot;</span><span class="token operator">&gt;</span>About<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></li><li><p>指定展示位置</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></li></ol><h3 id="_2-几个注意点" tabindex="-1"><a class="header-anchor" href="#_2-几个注意点" aria-hidden="true">#</a> 2.几个注意点</h3><ol><li>路由组件通常存放在<code>pages (views)</code>文件夹，一般组件通常存放在<code>components</code>文件夹。</li><li>通过切换，<strong>隐藏</strong>了的路由组件，默认是被销毁掉的，需要的时候再去挂载。</li><li>每个组件都有自己的<code>$route</code>属性，里面存储着自己的路由信息。</li><li>整个应用只有一个router，可以通过组件的<code>$router</code>属性获取到。</li></ol><h3 id="_3-多级路由-多级路由" tabindex="-1"><a class="header-anchor" href="#_3-多级路由-多级路由" aria-hidden="true">#</a> 3.多级路由（多级路由）</h3><ol><li><p>配置路由规则，使用children配置项：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">routes</span><span class="token operator">:</span><span class="token punctuation">[</span>
	<span class="token punctuation">{</span>
		<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;/about&#39;</span><span class="token punctuation">,</span>
		<span class="token literal-property property">component</span><span class="token operator">:</span>About<span class="token punctuation">,</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token punctuation">{</span>
		<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;/home&#39;</span><span class="token punctuation">,</span>
		<span class="token literal-property property">component</span><span class="token operator">:</span>Home<span class="token punctuation">,</span>
		<span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span> <span class="token comment">//通过children配置子级路由</span>
			<span class="token punctuation">{</span>
				<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;news&#39;</span><span class="token punctuation">,</span> <span class="token comment">//此处一定不要写：/news</span>
				<span class="token literal-property property">component</span><span class="token operator">:</span>News
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			<span class="token punctuation">{</span>
				<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;message&#39;</span><span class="token punctuation">,</span><span class="token comment">//此处一定不要写：/message</span>
				<span class="token literal-property property">component</span><span class="token operator">:</span>Message
			<span class="token punctuation">}</span>
		<span class="token punctuation">]</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>跳转（要写完整路径）：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>router<span class="token operator">-</span>link to<span class="token operator">=</span><span class="token string">&quot;/home/news&quot;</span><span class="token operator">&gt;</span>News<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></li></ol><h3 id="_4-路由的query参数" tabindex="-1"><a class="header-anchor" href="#_4-路由的query参数" aria-hidden="true">#</a> 4.路由的query参数</h3><ol><li><p>传递参数</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 跳转并携带query参数，to的字符串写法 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>router<span class="token operator">-</span>link <span class="token operator">:</span>to<span class="token operator">=</span><span class="token string">&quot;/home/message/detail?id=666&amp;title=你好&quot;</span><span class="token operator">&gt;</span>跳转<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
				
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 跳转并携带query参数，to的对象写法 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>router<span class="token operator">-</span>link 
	<span class="token operator">:</span>to<span class="token operator">=</span>&quot;<span class="token punctuation">{</span>
		<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;/home/message/detail&#39;</span><span class="token punctuation">,</span>
		<span class="token literal-property property">query</span><span class="token operator">:</span><span class="token punctuation">{</span>
		   <span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">666</span><span class="token punctuation">,</span>
            <span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">&#39;你好&#39;</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>&quot;
<span class="token operator">&gt;</span>跳转<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>接收参数：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id
$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>title
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div></li></ol><h3 id="_5-命名路由" tabindex="-1"><a class="header-anchor" href="#_5-命名路由" aria-hidden="true">#</a> 5.命名路由</h3><ol><li><p>作用：可以简化路由的跳转。</p></li><li><p>如何使用</p><ol><li><p>给路由命名：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
	<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;/demo&#39;</span><span class="token punctuation">,</span>
	<span class="token literal-property property">component</span><span class="token operator">:</span>Demo<span class="token punctuation">,</span>
	<span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
		<span class="token punctuation">{</span>
			<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;test&#39;</span><span class="token punctuation">,</span>
			<span class="token literal-property property">component</span><span class="token operator">:</span>Test<span class="token punctuation">,</span>
			<span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
				<span class="token punctuation">{</span>
                      		     <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;hello&#39;</span> <span class="token comment">//给路由命名</span>
					<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;welcome&#39;</span><span class="token punctuation">,</span>
					<span class="token literal-property property">component</span><span class="token operator">:</span>Hello<span class="token punctuation">,</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">]</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>简化跳转：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>简化前，需要写完整的路径 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>router<span class="token operator">-</span>link to<span class="token operator">=</span><span class="token string">&quot;/demo/test/welcome&quot;</span><span class="token operator">&gt;</span>跳转<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>简化后，直接通过名字跳转 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>router<span class="token operator">-</span>link <span class="token operator">:</span>to<span class="token operator">=</span><span class="token string">&quot;{name:&#39;hello&#39;}&quot;</span><span class="token operator">&gt;</span>跳转<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>简化写法配合传递参数 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>router<span class="token operator">-</span>link 
	<span class="token operator">:</span>to<span class="token operator">=</span>&quot;<span class="token punctuation">{</span>
		<span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;hello&#39;</span><span class="token punctuation">,</span>
		<span class="token literal-property property">query</span><span class="token operator">:</span><span class="token punctuation">{</span>
		   <span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">666</span><span class="token punctuation">,</span>
            <span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">&#39;你好&#39;</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>&quot;
<span class="token operator">&gt;</span>跳转<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li></ol></li></ol><h3 id="_6-路由的params参数" tabindex="-1"><a class="header-anchor" href="#_6-路由的params参数" aria-hidden="true">#</a> 6.路由的params参数</h3><ol><li><p>配置路由，声明接收params参数</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
	<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;/home&#39;</span><span class="token punctuation">,</span>
	<span class="token literal-property property">component</span><span class="token operator">:</span>Home<span class="token punctuation">,</span>
	<span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
		<span class="token punctuation">{</span>
			<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;news&#39;</span><span class="token punctuation">,</span>
			<span class="token literal-property property">component</span><span class="token operator">:</span>News
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token punctuation">{</span>
			<span class="token literal-property property">component</span><span class="token operator">:</span>Message<span class="token punctuation">,</span>
			<span class="token literal-property property">children</span><span class="token operator">:</span><span class="token punctuation">[</span>
				<span class="token punctuation">{</span>
					<span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;xiangqing&#39;</span><span class="token punctuation">,</span>
					<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;detail/:id/:title&#39;</span><span class="token punctuation">,</span> <span class="token comment">//使用占位符声明接收params参数</span>
					<span class="token literal-property property">component</span><span class="token operator">:</span>Detail
				<span class="token punctuation">}</span>
			<span class="token punctuation">]</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>传递参数</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token comment">&lt;!-- 跳转并携带params参数，to的字符串写法 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home/message/detail/666/你好<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>跳转<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
				
<span class="token comment">&lt;!-- 跳转并携带params参数，to的对象写法 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> 
	<span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{
		name:&#39;xiangqing&#39;,
		params:{
		   id:666,
                  title:&#39;你好&#39;
		}
	}<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>跳转<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！</p></blockquote></li><li><p>接收参数：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id
$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>title
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>如何指定params参数可传可不传？</p><p>在配置路由的时候，在占位的后面加上一个**？**即可</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">routes</span><span class="token operator">:</span><span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            <span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;/search/:keyword?&#39;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>params参数可以传递也可以不传递，但如果传递的是空串，如何解决？</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//使用undefined解决</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		<span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&quot;search&quot;</span><span class="token punctuation">,</span>
		<span class="token literal-property property">params</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">keyword</span><span class="token operator">:</span><span class="token string">&quot;&quot;</span> <span class="token operator">||</span> <span class="token keyword">undefined</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//当传递为空串时候，加个undefined</span>
		<span class="token literal-property property">query</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">k</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>keyword<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li></ol><h3 id="_7-路由的props配置" tabindex="-1"><a class="header-anchor" href="#_7-路由的props配置" aria-hidden="true">#</a> 7.路由的props配置</h3><p>作用：让路由组件更方便的收到参数</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
	<span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;xiangqing&#39;</span><span class="token punctuation">,</span>
	<span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">&#39;detail/:id&#39;</span><span class="token punctuation">,</span>
	<span class="token literal-property property">component</span><span class="token operator">:</span>Detail<span class="token punctuation">,</span>

	<span class="token comment">//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件</span>
	<span class="token comment">// props:{a:900}</span>

	<span class="token comment">//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件</span>
	<span class="token comment">// props:true</span>
	
	<span class="token comment">//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件</span>
	<span class="token function">props</span><span class="token punctuation">(</span><span class="token parameter">route</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token keyword">return</span> <span class="token punctuation">{</span>
			<span class="token literal-property property">id</span><span class="token operator">:</span>route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">,</span>
			<span class="token literal-property property">title</span><span class="token operator">:</span>route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>title
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_8-router-link-的replace属性" tabindex="-1"><a class="header-anchor" href="#_8-router-link-的replace属性" aria-hidden="true">#</a> 8.<code>&lt;router-link&gt;</code>的replace属性</h3><ol><li>作用：控制路由跳转时操作浏览器历史记录的模式</li><li>浏览器的历史记录有两种写入方式：分别为<code>push</code>和<code>replace</code>，<code>push</code>是追加历史记录，<code>replace</code>是替换当前记录。路由跳转时候默认为<code>push</code></li><li>如何开启<code>replace</code>模式：<code>&lt;router-link replace .......&gt;News&lt;/router-link&gt;</code></li></ol><h3 id="_9-编程式路由导航" tabindex="-1"><a class="header-anchor" href="#_9-编程式路由导航" aria-hidden="true">#</a> 9.编程式路由导航</h3><ol><li><p>作用：不借助<code>&lt;router-link&gt; </code>实现路由跳转，让路由跳转更加灵活</p></li><li><p>具体编码：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//$router的两个API</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	<span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;xiangqing&#39;</span><span class="token punctuation">,</span>
		<span class="token literal-property property">params</span><span class="token operator">:</span><span class="token punctuation">{</span>
			<span class="token literal-property property">id</span><span class="token operator">:</span>xxx<span class="token punctuation">,</span>
			<span class="token literal-property property">title</span><span class="token operator">:</span>xxx
		<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	<span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;xiangqing&#39;</span><span class="token punctuation">,</span>
		<span class="token literal-property property">params</span><span class="token operator">:</span><span class="token punctuation">{</span>
			<span class="token literal-property property">id</span><span class="token operator">:</span>xxx<span class="token punctuation">,</span>
			<span class="token literal-property property">title</span><span class="token operator">:</span>xxx
		<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//前进</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//后退</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//可前进也可后退</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li></ol><h3 id="_10-缓存路由组件" tabindex="-1"><a class="header-anchor" href="#_10-缓存路由组件" aria-hidden="true">#</a> 10.缓存路由组件</h3><ol><li><p>作用：让不展示的路由组件保持挂载，不被销毁。</p></li><li><p>具体编码：</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token comment">&lt;!--&lt;keep-alive :include=&quot;[&#39;组件名&#39;,&#39;组件名&#39;,&#39;组件名&#39;]&quot;&gt;  缓存多个组件--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>keep-alive</span> <span class="token attr-name">include</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>组件名中的name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>keep-alive</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li></ol><h3 id="_11-两个新的生命周期钩子" tabindex="-1"><a class="header-anchor" href="#_11-两个新的生命周期钩子" aria-hidden="true">#</a> 11.两个新的生命周期钩子</h3><ol><li>作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。</li><li>具体名字： <ol><li><code>activated</code>路由组件被激活时触发。</li><li><code>deactivated</code>路由组件失活时触发。</li></ol></li></ol><h3 id="_12-路由守卫" tabindex="-1"><a class="header-anchor" href="#_12-路由守卫" aria-hidden="true">#</a> 12.路由守卫</h3><ol><li><p>作用：对路由进行权限控制</p></li><li><p>分类：全局守卫、独享守卫、组件内守卫</p></li><li><p>全局守卫:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//全局前置守卫：初始化时执行、每次路由切换前执行</span>
router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span>from<span class="token punctuation">,</span>next</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token comment">// to:获取到你要跳转到哪个路由的信息</span>
    <span class="token comment">// from:获取到你从哪个路由而来的信息</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;beforeEach&#39;</span><span class="token punctuation">,</span>to<span class="token punctuation">,</span>from<span class="token punctuation">)</span>
	<span class="token keyword">if</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>isAuth<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">//判断当前路由是否需要进行权限控制</span>
		<span class="token keyword">if</span><span class="token punctuation">(</span>localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">&#39;school&#39;</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">&#39;atguigu&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">//权限控制的具体规则</span>
			<span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//放行</span>
		<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
			<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&#39;暂无权限查看&#39;</span><span class="token punctuation">)</span>
			<span class="token comment">// next({name:&#39;guanyu&#39;})</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
		<span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//放行</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">//全局后置守卫：初始化时执行、每次路由切换后执行</span>
router<span class="token punctuation">.</span><span class="token function">afterEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span><span class="token keyword">from</span></span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;afterEach&#39;</span><span class="token punctuation">,</span>to<span class="token punctuation">,</span>from<span class="token punctuation">)</span>
	<span class="token keyword">if</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">{</span> 
		document<span class="token punctuation">.</span>title <span class="token operator">=</span> to<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>title <span class="token comment">//修改网页的title</span>
	<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
		document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">&#39;vue_test&#39;</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>独享守卫:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
                    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;xinwen&quot;</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&quot;news&quot;</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">component</span><span class="token operator">:</span> News<span class="token punctuation">,</span>
                    <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                        <span class="token literal-property property">isAuth</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;新闻&quot;</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token function">beforeEnter</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                        <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>isAuth<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//判断当前路由是否需要进行权限控制</span>
                           <span class="token comment">// ...</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>组件内守卫：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//进入守卫：通过路由规则，进入该组件时被调用</span>
<span class="token function">beforeRouteEnter</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//离开守卫：通过路由规则，离开该组件时被调用</span>
<span class="token function">beforeRouteLeave</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li></ol><h3 id="_13-路由器的两种工作模式" tabindex="-1"><a class="header-anchor" href="#_13-路由器的两种工作模式" aria-hidden="true">#</a> 13.路由器的两种工作模式</h3><ol><li>对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。</li><li>hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。</li><li>hash模式： <ol><li>地址中永远带着#号，不美观 。</li><li>若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。</li><li>兼容性较好。</li></ol></li><li>history模式： <ol><li>地址干净，美观 。</li><li>兼容性和hash模式相比略差。</li><li>应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。</li></ol></li></ol></div></div><footer class="page-meta"><div class="meta-item edit-link"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M2 26h28v2H2z" fill="currentColor"></path><path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Edit this page<!--]--></span></span></div><div class="meta-item last-updated"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Last Updated 2023/5/1 13:50:48<!--]--></span></span></div></footer><!----><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">ON THIS PAGE</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#路由" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="路由"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->路由<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_1-基本使用" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.基本使用"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.基本使用<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_2-几个注意点" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.几个注意点"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.几个注意点<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_3-多级路由-多级路由" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.多级路由（多级路由）"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.多级路由（多级路由）<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_4-路由的query参数" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="4.路由的query参数"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->4.路由的query参数<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_5-命名路由" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="5.命名路由"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->5.命名路由<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_6-路由的params参数" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="6.路由的params参数"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->6.路由的params参数<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_7-路由的props配置" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="7.路由的props配置"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->7.路由的props配置<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_8-router-link-的replace属性" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="8.&lt;router-link&gt;的replace属性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->8.&lt;router-link&gt;的replace属性<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_9-编程式路由导航" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="9.编程式路由导航"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->9.编程式路由导航<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_10-缓存路由组件" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="10.缓存路由组件"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->10.缓存路由组件<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_11-两个新的生命周期钩子" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="11.两个新的生命周期钩子"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->11.两个新的生命周期钩子<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_12-路由守卫" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="12.路由守卫"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->12.路由守卫<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/vue-router3.html#_13-路由器的两种工作模式" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="13.路由器的两种工作模式"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->13.路由器的两种工作模式<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/assets/app-5e55c3a9.js" defer></script>
  </body>
</html>
